<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>json_board</title>
<script>
var xhr;
var rs;
//var aa;
function init(){
	rs = document.getElementById("result");
	//aa = document.getElementById("aaaa");
	
	xhr = new XMLHttpRequest();
	
	var btn = document.getElementById("btn");
	xhr.onreadystatechange = boardLoad;
	
	btn.onclick = function(){
		var find = document.getElementById("find").value;
		var url = "../board2/list_json.jsp?find="+find;
		xhr.open('get', url, true);
		xhr.send();
	};
}

function boardLoad(){
	if (xhr.status == 200 && xhr.readyState == 4) {
		var obj = xhr.responseText;
		var s = obj.indexOf("<body>") + 6;
		var e = obj.lastIndexOf("</body>");
		var lastobj = obj.substring(s, e);
		
		//alert(lastobj);
		rs.innerHTML = "";
		//aa.innerHTML = "";
		eval(lastobj);
		
		for(var i=0;i<jsonArray.length;i++){
			//aa.innerHTML += "<li>Subject : " + jsonArray[i].subject;
			rs.innerHTML += "<li>MID : " + jsonArray[i].mid;
			rs.innerHTML += "<a href='#'>Subject : " + jsonArray[i].subject +"</a><br/>";
			rs.innerHTML += "<li>Mdate : " + jsonArray[i].mdate;
			rs.innerHTML += "<li>Hit : " + jsonArray[i].hit;
			rs.innerHTML += "<hr/>";
		}
		
		if(pageInfo.endPage > 2){
			rs.innerHTML += "<input type='button' value='<<' onclick='goPage(" + (Number(pageInfo.startPage) - 1) + ")'>"; 
		}
		
		for(var j=pageInfo.startPage;j<=pageInfo.endPage;j++){
			rs.innerHTML += "<input type='button' value='" + j + "' onclick='goPage(" + j + ")'>"; 
		}
		
		if(pageInfo.endPage < pageInfo.totPage){
			rs.innerHTML += "<input type='button' value='>>' onclick='goPage(" + (Number(pageInfo.endPage) + 1) + ")'>"; 
		}

		
	}
}

function goPage(page){
	var find = document.getElementById("find").value;
	var url = "../board2/list_json.jsp?find="+find+"&nowPage="+page;
	xhr.open('get', url, true);
	xhr.send();

}
</script>
</head>
<body>
<h1>JSON Board</h1>
<input type='search' id='find' placeholder = '검색할 키워드 입력'>
<input type='button' id='btn' value='검색'><p/>

<!-- <input type='button' value='JSON Board List' id='btn'> -->
<div id='result'>
<!-- //<a href='#' id = 'aaaa'></a> -->
</div>
<script>init();</script>
</body>
</html>